<template>
    <div class="blog-detail-container">
        <h1>blog-detail-container</h1>
        <h1>{{ props.blog.title }}</h1>
        <div class="aside">
            <span>日期:{{ formatDate(props.blog.creatDate) }}</span>
            <span>浏览:{{ props.blog.scanNumber }}</span>
            <a href="">评论:{{ props.blog.commentNumber }}</a>
            <a href="">{{ props.blog.category.name }}</a>
        </div>
        <div v-html="props.blog.htmlContent" class="markdonw-body"></div>
    </div>
</template>
<script setup lang='ts'>
import { formatDate } from '~@/untils/NslUtils';
import 'highlight.js/styles/github.css'
import '~@/styles/markdown.css'
import { PropType, onMounted } from 'vue';
import { TypeApiBlogDetailI } from '~@/api/apiTypes';
    //#region defineXxx
    defineOptions({
        name:'BlogDetail'
    });

    const props=defineProps({
        blog:{
            type:Object as PropType<TypeApiBlogDetailI>,
            required:true
        },
    });
    const emit = defineEmits<{
        event1:[para1:number,para2:string],
        event2:[para1:number,para2:string],
    }>();
    //#endregion

    console.log('in blog detail ');
    
    onMounted(()=>{
        console.log('in blog detail mounted');
        
    })
    
</script>
<style lang='less' scoped>
.aside{
    font-size:12px;
    color:@gray;
    span,
    a{
        margin-right: 15px;
    }
}
.markdown-body{
    margin: 2em 0;
} 
</style>